<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会员充值</title>
    <script src="/js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 980px;
            margin: 0 auto;
            color: #555;
            padding-top: 20px;
            position: relative;
        }

        .clear {
            clear: both;
        }

        h1 {
            color: #664630;
            font-size: 22px;
        }

        .pay {
            padding: 5px 40px;
        }

        .info {
            height: 48px;
            line-height: 48px;
            border-bottom: 1px solid #f3f3f3;
            overflow: hidden;
            margin-bottom: 12px;
            clear: both;
        }

        .field {
            float: left;
            font-size: 16px;
        }

        .value {
            float: left;
            margin-left: 15px;
            font-size: 16px;
        }

        .money {
            color: #e69800;
        }

        .vip-money {
            color: #cf7013;
            margin-left: 10px;
        }

        input[type=text] {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            font-variant: tabular-nums;
            list-style: none;
            -webkit-font-feature-settings: "tnum";
            font-feature-settings: "tnum";
            position: relative;
            display: inline-block;
            width: 100%;
            height: 32px;
            padding: 4px 11px;
            color: rgba(0, 0, 0, .65);
            font-size: 14px;
            line-height: 1.5;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ddd9d2;
            border-radius: 4px;
            -webkit-transition: all .3s;
            transition: all .3s;
        }

        input[type=text]:focus, input[type=text]:hover {
            border-color: #ffac59;
            border-right-width: 1px !important;
            outline: 0;
            -webkit-box-shadow: 0 0 0 2px rgba(255, 145, 48, .2);
            box-shadow: 0 0 0 2px rgba(255, 145, 48, .2);
        }

        button {
            width: 155px;
            height: 41px;
            line-height: 41px;
            background-color: #fff;
            border-radius: 21px;
            color: #cf7013;
            font-size: 16px;
            font-weight: 700;
            margin: 20px 0 0 75px;
            border: 1px solid #ffb82c;
        }

        .pay-num {
            list-style: none;
            overflow: hidden;

        }

        .pay-num li {
            float: left;
            width: 136px;
            height: 50px;
            line-height: 21px;
            background-color: #fff;
            border-radius: 4px;
            border: 1px solid #e6a032;
            position: relative;
            padding: 5px 5px 0 5px;
            margin-bottom: 10px;
            margin-right: 18px;
            font-size: 14px;
        }

        .pay-num li .t1 {
            color: #e96300;
        }

        .pay-num li .t2 {
            color: #a67551;
        }

        #diynum {
            text-align: center;
            width: 82px;
            height: 40px;
            border-top: none;
            border-right: none;
            border-bottom: 1px solid rgb(204, 204, 204);
            border-left: none;
            border-image: initial;
        }

        #diynum:focus, #diynum:hover {
            border-top: none;
            border-right: none;
            border-bottom: 1px solid rgb(204, 204, 204);
            border-left: none;
        }

        .seller_info {
            position: absolute;
            right: 40px;
            top: 0;
            background: #168bd8;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            padding: 20px;
            width: 240px;
            line-height: 32px;
            z-index: 500;
        }

        .seller_info h3 {
            text-align: center;
            margin-bottom: 10px;
            padding-bottom: 10px;
            font-size: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .seller_info p {
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .ewm {
            display: block;
            width: 120px;
            margin: 0 auto;
            padding: 10px 0;
            text-align: center;
            background: #fff;
            box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.2);;
        }

        .pay_box {
            float: left;
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden;
            width: 847px;
            padding: 20px;
        }

        .pay_menu {
            height: 50px;
            line-height: 50px;
            background: #f8f8f8;
            overflow: hidden;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        .pay {
            float: left;
            height: 50px;
            padding: 0 50px;
            text-align: center;
            cursor: pointer;
        }

        .checked1 {
            background: #e69800;
            color: #fff;
        }

        .pay_list1, .pay_list2 {
            padding: 20px 0 0 10px;
            border-top: none;
        }

        .check_pay {
            display: block;
            width: 180px;
            line-height: 50px;
            height: 50px;
            text-align: center;
            border-radius: 25px;
            font-weight: bold;
            color: #e69800;
            border: 1px solid #e69800;
            margin: 20px auto 15px auto;
            cursor: pointer;
            font-size: 16px;
            background: none;
            box-shadow: 0 2px 5px #eee;
            transition: .2s;
        }

        .check_pay:hover {
            background: #e69800;
            color: #fff;
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            max-width: 400px;
            width: 220px;
            text-align: center;
            position: relative;
        }

        .close-btn {
            width: 5px;
            height: 5px;
            position: absolute;
            top: -24px;
            right: 24px;
            padding: 4px;
            background-color: transparent;
            border: none;
            cursor: pointer;
        }

        .close-icon {
            font-size: 24px;
            display: inline-block;
        }

        h2 {
            margin-bottom: 18px;
            font-size: 18px;
        }
    </style>
</head>
<body>
@verbatim
<div id="app" class="container">
    <div class="seller_info"><h3>游戏信息</h3>
        <p>游戏版本：{{$gameVersion}}
            <br>游戏分区：{{$gameServer}}
            <br>游戏账号：{{$gameAccount}}
            <br>游戏人物：{{$gameRole}}
        </p>
        <div class="ewm" style="padding: 0;width: 110px">
        </div>
    </div>
    <div class="pay">
        <div class="info">
            <div class="field">支付方式：</div>
            <div class="value">
                <input id="wx-3" type="radio" name="payment" value="WEIXIN" v-model="rechargeForm.pay_type">&nbsp;<label
                    for="wx-3">微信</label>
                &nbsp;&nbsp;
                <!--<input id="wx-5" type="radio" name="payment" value="5" v-model="payType">&nbsp;<label-->
                <!--    for="wx-5">微信-2</label>-->
                <!--&nbsp;&nbsp;-->
                <!--<input id="wx-7" type="radio" name="payment" value="7" v-model="payType">&nbsp;<label-->
                <!--    for="wx-7">微信-3</label>-->
                <!--&nbsp;&nbsp;-->

                <input id="wx-4" type="radio" name="payment" value="ALIPAY" v-model="rechargeForm.pay_type">&nbsp;<label
                    for="wx-4">支付宝</label>
                &nbsp;&nbsp;
                <!--<input id="wx-6" type="radio" name="payment" value="6" v-model="payType">&nbsp;<label-->
                <!--for="wx-6">支付宝-2</label>-->
                <!--&nbsp;&nbsp;-->
                <!--<input id="wx-8" type="radio" name="payment" value="8" v-model="payType">&nbsp;<label-->
                <!--for="wx-8">支付宝-3</label>-->
                <!--&nbsp;&nbsp;-->
            </div>
            <div class="clear"></div>
        </div>
        <div class="info">
            <div class="field">联系QQ：</div>
            <div class="value" style="width: 400px">
                <input type="text" v-model="rechargeForm.qq" placeholder="请输入qq，以便后续处理异常">
            </div>
            <div class="clear"></div>
        </div>
        <div class="pay_box">
            <div class="pay_menu" style="position: relative">
                <ul id="select_pay">
                    <li class="selected cursor">
                        <div class="pay pay_cj_1  checked1">
                            <input type="radio" name="pty" style="display:none" value="other" id="other" checked="">
                            <img src=""
                                 width="18" height="18" style="vertical-align:middle"> 充值金额
                        </div>
                    </li>
                </ul>
                <span style="position: absolute; left: 208px;top: 0px;font-size: 14px;color: #555;">温馨提示：充值前请核对账号信息，如发现不对请关闭页面，重新打开!</span>
            </div>
            <div style="margin: 30px auto">
                <div class="value" style="">
                    <ul class="pay-num">
                        <li
                            v-for="item in rechargeMoneyList"
                            :label="item.need_money"
                            :key="item.need_money"
                            @click="changeMoney(item.need_money,0)"
                        >
                            <i v-show="!isNumDiy && rechargeForm.money == item.need_money" data-v-2dd1ba48="" :data-num="item.need_money"
                               style="background: url() no-repeat;background-size: 100% 100%;height: 18px;width: 18px; position: absolute;right: 0;bottom: 0;"></i>
                            <div class="t1">{{item.need_money}}元</div>
                        </li>
{{--                        <li @click="changeMoney2()">--}}
{{--                            <i v-show="isNumDiy" data-v-2dd1ba48="" data-num="500"--}}
{{--                               style="background: url() no-repeat;background-size: 100% 100%;height: 18px;width: 18px; position: absolute;right: 0;bottom: 0;"></i>--}}
{{--                            <input @input="changeMoney2()" @blur="changeMoney3()" id="diynum" type="text" value="10"--}}
{{--                                   style="">--}}
{{--                            <span class="t1">元</span>--}}
{{--                        </li>--}}
                    </ul>
                </div>
                <div class="clear"></div>
            </div>
            <div id="submit" class="btn1"><input type="submit" class="check_pay" @click="pay" value="确认支付"></div>
        </div>
    </div>
    <div class="modal" v-if="showModel">
        <div class="modal-content" @click.stop>
            <h2 v-if="payType == 3 || payType == 5 || payType == 7">微信支付</h2>
            <h2 v-if="payType == 4 || payType == 6 || payType == 8">支付宝</h2>
            <p><img style="width: 180px;height: 180px;" :src="qrcode" alt=""></p>
            <button class="close-btn" @click="closeModal()">
                <span class="close-icon">x</span>
            </button>
        </div>
    </div>
</div>
</body>
@endverbatim
<script>
    var app = new Vue({
        el: '#app',
        data: {
            rechargeForm: {
                order_no: '{{$orderNo}}',
                money: '',
                pay_type: 'WEIXIN',
                game_version: '{{$gameVersion}}',
                game_server: '{{$gameServer}}',
                game_account: '{{$gameAccount}}',
                game_role: '{{$gameRole}}',
                qq: '',
                union_id: '{{$unionId}}',
                plat_name: '{{$platName}}',
            },
            rechargeMoneyList: [
                {need_money: 10},
                {need_money: 20},
                {need_money: 30},
                {need_money: 50},
                {need_money: 100},
                {need_money: 300},
                {need_money: 500},
                {need_money: 1000},
                {need_money: 2000},
                {need_money: 5000},
            ],
            isNumDiy: false,
            showModel: false,
            qrcode: '',
            orderSn: '',
        },
        computed: {
            num4: function () {
                return this.num1 + this.num2 + this.num3
            }
        },
        methods: {
            changeMoney: function (num, zs) {
                this.isNumDiy = false
                this.num1 = num;
                this.num2 = num * this.hyzs / 100;
                this.num3 = num * zs / 100;
            },
            changeMoney2: function () {
                this.isNumDiy = true
                this.num1 = parseInt(document.getElementById('diynum').value);
                this.num2 = this.num1 * this.hyzs / 100;
                this.num3 = 0
                let tempZs = 0;
                for (let i = 0; i < this.czzs.length; i++) {
                    if (this.num1 >= this.czzs[i].num) {
                        tempZs = this.czzs[i].zs
                        console.log(tempZs)
                    }
                }
                this.num3 = this.num1 * tempZs / 100;
            },
            changeMoney3: function () {
                if (parseInt(document.getElementById('diynum').value) < 10) {
                    document.getElementById('diynum').value = 10;
                    this.num1 = 10;
                }
            },
            closeModal: function () {
                this.showModel = false;
            },
            pay: function () {
                let params = {
                    unionid: '{$data.openid}',
                    type: this.payType,
                    sum: this.num1,
                    qq: this.qq
                }
                if (this.qq.length == 0) {
                    alert('请输入QQ号')
                    return false
                }
                if (this.num1 < 10) {
                    alert('请输入充值金额')
                    return false
                }

                let _this = this
                $.post('/api/index/createpayment', params, function (res) {
                    console.log(res)
                    if (res.code == 0) {
                        _this.showModel = true
                        _this.qrcode = res.data.QrCode

                        _this.orderSn = res.data.outTradeNo
                        _this.payCheck()
                    } else {
                        alert(res.msg)
                    }
                })
            },
            payCheck: function () {
                if (this.orderSn) {
                    let _this = this
                    $.post('/api/index/paymentcheck', {
                        unionid: '{$data.openid}',
                        outTradeNo: _this.orderSn
                    }, function (res) {
                        console.log(res)
                        if (res.code == 0) {
                            alert('支付成功')
                            window.location.reload()
                        } else {
                            console.log(res, '等待支付中')
                            setTimeout(function () {
                                _this.payCheck()
                            }, 1000)
                        }
                    })
                }
            }
        }
    })
</script>
</html>
